<template>
  <el-select
    v-model="selectValue"
    filterable
    :loading="isLoading"
    :filter-method="filterMethod"
    popper-class="pipe-select-container"
  >
    <el-option
      v-for="item in selectList"
      :key="item.ownId"
      :label="item.nickname"
      :value="item.ownId"
    >
      <template #default>
        <div class="line-row">
          <span class="line-cell">{{ item.nickname }}</span>
          <span class="line-cell">{{ item.mobile }}</span>
        </div>
        <div class="line-row">
          <span class="line-cell">{{ item.ownId }}</span>
          <span class="line-cell">{{ item.uniqueCode }}</span>
        </div>
      </template>
    </el-option>
  </el-select>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { getUsersList } from '@/apis/users';
import { debounce } from 'lodash';

import { useCacheDataStore } from '@/stores/cache-data';
import { storeToRefs } from 'pinia';
const cacheDataStore = useCacheDataStore();
const { userData } = storeToRefs(cacheDataStore);

const isLoading = ref(false);

const selectList = ref<API.user.EntitySchema[]>();

const props = defineProps({
  modelValue: {
    type: [Number, String],
    required: true,
    default: ''
  }
});

// emits
const emits = defineEmits(['update:modelValue']);

watch(
  () => userData.value.list,
  (val) => {
    selectList.value = val;
  },
  {
    immediate: true
  }
);

const selectValue = computed({
  get: () => props.modelValue,
  set: (val) => {
    emits('update:modelValue', val);
  }
});

// 搜索
const filterMethod = debounce(function (keyword: string) {
  if (!keyword) {
    selectList.value = userData.value.list;
    return;
  }
  let str = isNaN(Number(keyword)) ? keyword : `${Number(keyword)}`;
  const reg = new RegExp(str, 'gi');
  selectList.value = userData.value.list.filter((item) => {
    if (reg.test(item.nickname)) return true;
    if (reg.test(item.mobile)) return true;
    if (reg.test(item.uniqueCode)) return true;
    if (reg.test(item.ownId)) return true;
    return false;
  });

  // 若没搜索到，使用远程搜索
  requestData(keyword);
}, 400);

// 获取分页数据
const requestData = (keyword?: string) => {
  const dataOpt: any = {
    field: 'base',
    page: userData.value.page,
    limit: userData.value.size,
    // 搜索的关键字
    keyword
  };

  // 开始加载
  isLoading.value = true;

  getUsersList(dataOpt)
    .then((res) => {
      // 判断是否通过搜索获取的
      if (keyword) {
        selectList.value = res.data.data || [];
      } else {
        // 缓存到store
        userData.value.list = res.data.data || [];
      }

      // 加载结束
      isLoading.value = false;
    })
    .catch((err) => {
      console.log('table list error', err);
      // 加载结束
      isLoading.value = false;
    });
};
if (!userData.value.list.length) requestData();
</script>

<style lang="scss">
.pipe-select-container {
  .el-select-dropdown__item {
    font-size: 12px;
    height: auto;
    line-height: normal;
    padding: 8px;
    border-bottom: var(--el-table-border);
  }

  .line-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
  }
}
</style>
